import React, {useRef, useState} from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { connect} from 'umi';
import {Button,message,Tabs,Divider} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import { getRecordList} from '../service';
import AddForm from './components/AddForm';
import moment from 'moment';
import { BPMStatusEnum } from '@/utils/constant'
const  { TabPane } = Tabs;

const TableList = () => {
  const actionRef = useRef();
  const actionRef2 = useRef();
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  const repair = () => {
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleSubmit = (values) => {
    setLoading(true);
    // saveOrUpdateLeaveInfo(values).then((res) => {
    //   if (res.flag) {
    //     handleCancel();
    //     message.success(`操作保存成功！`);
    //     actionRef.current.reload();
    //   } else {
    //     message.error(`保存失败，错误:` + res.error);
    //   }
    //   setLoading(false);
    // })
  };

  const handleChangTabIndex = (key) => {
    if(key === '1'){
      actionRef.current &&  actionRef.current.reload();
    }else{
      actionRef2.current && actionRef2.current.reload();
    }
  };

  const columns = [
    {
      title: '查询考勤时间',
      hideInTable:true,
      dataIndex: 'date',
      valueType: 'dateRange'
    },
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '公司名称',
      hideInSearch: true,
      dataIndex: 'orgname',
    },
    {
      title: '部门',
      hideInSearch: true,
      dataIndex: 'unitname',
    },
    {
      title: '工号',
      hideInSearch: true,
      dataIndex: 'code',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '日期',
      hideInSearch: true,
      dataIndex: 'beldate',
    },
    {
      title: '上班时间',
      dataIndex: 'startAm',
      hideInSearch: true,
      onCell: (record)=>{
        if(record.startAm === null){
          return {
            style:{
              color:'red'
            }
          }
        }
      },
      render: (text) => {
        if(text === '-'){
          return '缺卡';
        }
        return text;
      },
    },
    {
      title: '中午下班时间',
      dataIndex: 'endAm',
      hideInSearch: true,
      onCell: (record)=>{
        if(record.endAm === null){
          return {
            style:{
              color:'red'
            }
          }
        }
      },
      render: (text) => {
        if(text === '-'){
          return '缺卡';
        }
        return text;
      },
    },
    {
      title: '下午上班时间',
      dataIndex: 'startPm',
      hideInSearch: true,
      onCell: (record)=>{
        if(record.startPm === null){
          return {
            style:{
              color:'red'
            }
          }
        }
      },
      render: (text) => {
        if(text === '-'){
          return '缺卡';
        }
        return text;
      },
    },
    {
      title: '下班时间',
      dataIndex: 'endPm',
      hideInSearch: true,
      onCell: (record)=>{
        if(record.endPm === null){
          return {
            style:{
              color:'red'
            }
          }
        }
      },
      render: (text) => {
        if(text === '-'){
          return '缺卡';
        }
        return text;
      },
    },
  ];

  const repairColumns = [
    {
      title: '查询考勤时间',
      hideInTable:true,
      dataIndex: 'date',
      valueType: 'dateRange'
    },
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '创建日期',
      dataIndex: 'ctm',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '补卡数量',
      dataIndex: 'number',
      hideInSearch: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      valueEnum: BPMStatusEnum
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          <a onClick={() => repair(record)}>修改</a>
          <Divider type="vertical"/>
          <a onClick={() => repair(record)}>删除</a>
          <Divider type="vertical"/>
          <a onClick={() => repair(record)}>发起</a>
          <Divider type="vertical"/>
          <a onClick={() => repair(record)}>详情</a>
        </>
      ),
    },
  ];

  const onChange = () => {

  };

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="1" onChange={handleChangTabIndex}>
        <TabPane tab="考勤记录" key="1">
          <ProTable
            actionRef={actionRef}
            rowKey="beldate"
            request={(params) => getRecordList(params)}
            columns={columns}
          />
        </TabPane>
        {/*<TabPane tab="补卡记录" key="2">*/}
        {/*  <ProTable*/}
        {/*    actionRef={actionRef2}*/}
        {/*    rowKey="id"*/}
        {/*    // request={(params) => getRecordList(params)}*/}
        {/*    columns={repairColumns}*/}
        {/*    toolBarRender={(action, {selectedRows}) => [<Button type="primary" onClick={() => repair(null)}><PlusOutlined/>补卡</Button>]}*/}
        {/*  />*/}
        {/*  <AddForm*/}
        {/*    loading={loading}*/}
        {/*    visible={visible}*/}
        {/*    onChange={onChange}*/}
        {/*    onCancel={handleCancel}*/}
        {/*    onSubmit={handleSubmit}*/}
        {/*  />*/}
        {/*</TabPane>*/}
      </Tabs>
    </PageHeaderWrapper>
  )
};
export default connect(({}) => ({
}))(TableList)
